<template>
	<div class="tab-bar flex-box">
		<div class="item" :class="{'active':currentPage === 'pages/laboratory/index'}" @click="navClick('pages/laboratory/index')">实验室</div>
		<div class="item">
			<image class="battery" src="../static/imgs/battery.png" alt="">
		</div>
		<div class="item" :class="{'active':currentPage === 'pages/my/index'}" @click="navClick('pages/my/index')">我的</div>
	</div>
</template>

<script>
	export default{
		name:'tabbar',
		data(){
			return{
				currentPage:''
			}
		},
		methods:{
			navClick(url){
				console.log(url)
				uni.redirectTo({
					url:'/'+url
				})
			}
		},
		mounted() {
			 let routes = getCurrentPages()
		     this.currentPage = routes[routes.length - 1].route
			 console.log(routes)
		}
	}
</script>

<style scoped lang="scss">
	.tab-bar{
		width: 100%;
		height: 137upx;
		flex: none;
		background: url(../static/imgs/tabbar_bg.png)no-repeat;
		background-size: 100% 100%;
		.battery{
			width: 61upx;
			height: 92upx;
		}
		.item{
			flex: 1;
			display: flex;
			justify-content: center;
			&.active{
				color: #478BFF;
			}
		}
	}
</style>